<template>
  <c-table border v-bind="$attrs" :columns="columns" :data="data">
    <template v-slot:warranty_method="scope">
      <el-tooltip effect="light" :content="scope.row.warranty_method" placement="bottom">
        <span>{{ scope.row.warranty_method | substr(19) }}</span>
      </el-tooltip>
    </template>

    <template v-slot:otherCost="scope">
      <input
        class="form-control text-center"
        :value="scope.row.other_cost"
        v-input-number="{ min: 0 }"
        @blur="e => handleEdit(e, scope.row, 'other_cost')"
      />
    </template>
  </c-table>
</template>

<script>
export default {
  components: {},
  props: {
    columns: Array,
    data: Array,
  },
  data() {
    return {
      tableName: 'market_project',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async handleEdit(e, row, key) {
      const { value } = e.target
      const rowValue = row[key]

      if (value === rowValue || (!value && !rowValue)) {
        return
      }

      const id = row.customer_related_id
      const data = {
        [key]: value,
      }
      this.$api
        .updateData(this.$serviceName, this.tableName, id, data)
        .then(res => {
          this.$emit('edit', res)
        })
        .catch(() => {
          e.target.value = row[key]
          this.$message.error('修改失败！')
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
